<template name="headPic">
	<view class="backdrop" @tap="userClick">
		<view class="flex justify-content m-b1 position-r">
			<image :src="image" class="picture m-t6 border-r1"></image>
			<image v-if="atte" src="/static/images/attestation.png" class="attestation" mode="widthFix"></image>
		</view>
		<text class="flex justify-content fs-2 m-t1">{{name}}</text>
		<view class="adjective" v-if="icon">
			<image src="/static/images/explore.png" class="head-img explore">
			<image src="/static/images/delicacy.png" class="head-img delicacy">
			<image src="/static/images/on-foot.png" class="head-img on-foot">
		</view>
	</view>
</template>

<script>
	export default{
		name:"headPic",
		props:{
			atte:{
				type:Boolean,
				default : false,
			},
			name:{
				type:String,
				value : '',
			},
			image:{
				type:String,
				value : '',
			},
			icon:{
				type:Boolean,
				default : false,
			}
			
		},
		methods:{
			userClick() {
				this.$emit("userClick");
			}
		}
	}
</script>

<style scoped>
.head-img{width: 56rpx;height: 56rpx;}
.adjective{margin-top: -255rpx;}
.explore{margin: 0 260rpx;}
.delicacy{margin: 70rpx 0 30rpx 70rpx;}
.on-foot{margin: 20rpx 0 0 190rpx;}
</style>
